class SpzCustomSmartSearchToast extends SPZ.BaseElement { constructor(element) { super(element); this.toastDom = null; this.toastTimeout = null; } isLayoutSupported(layout) { return layout == SPZCore.Layout.LOGIC; } buildCallback(){ this.init(); } init(){ const toast = document.createElement('div'); toast.id = 'spz-custom-smart-search-toast-889'; toast.className = 'spz-custom-smart-search-toast'; document.body.appendChild(toast); this.toastDom = toast; this.registerAction('showToast',(invocation)=>{ this.showToast(invocation.args); }); this.registerAction('hideToast',(invocation)=>{ this.hideToast(invocation.args); }); } showToast({ message, duration = 2000 }){ if( !this.toastDom ) return; this.toastDom.innerHTML = message; this.toastDom.classList.add('smart-search-toast-show'); clearTimeout(this.toastTimeout); this.toastTimeout = setTimeout(() => { this.hideToast(); }, duration); } hideToast(){ if( !this.toastDom ) return; this.toastDom.classList.remove('smart-search-toast-show'); } } SPZ.defineElement('spz-custom-smart-search-toast', SpzCustomSmartSearchToast);

Anastasia Anastasia

class SpzCustomSmartSearchToast extends SPZ.BaseElement { constructor(element) { super(element); this.toastDom = null; this.toastTimeout = null; } isLayoutSupported(layout) { return layout == SPZCore.Layout.LOGIC; } buildCallback(){ this.init(); } init(){ const toast = document.createElement('div'); toast.id = 'spz-custom-smart-search-toast-19'; toast.className = 'spz-custom-smart-search-toast'; document.body.appendChild(toast); this.toastDom = toast; this.registerAction('showToast',(invocation)=>{ this.showToast(invocation.args); }); this.registerAction('hideToast',(invocation)=>{ this.hideToast(invocation.args); }); } showToast({ message, duration = 2000 }){ if( !this.toastDom ) return; this.toastDom.innerHTML = message; this.toastDom.classList.add('smart-search-toast-show'); clearTimeout(this.toastTimeout); this.toastTimeout = setTimeout(() => { this.hideToast(); }, duration); } hideToast(){ if( !this.toastDom ) return; this.toastDom.classList.remove('smart-search-toast-show'); } } SPZ.defineElement('spz-custom-smart-search-toast', SpzCustomSmartSearchToast);

1/4

Balenciaga Women's Dynasty Sunglasses Tortoise 51.0 Millimeters

Name: Balenciaga Women's Dynasty Sunglasses Tortoise 51.0 Millimeters
Brand: amazon
Price: 290 JPY
Availability: InStock

测试测试

title

测试测试

¥290

(Tax included)

Color:

Tortoise

Lens Width:

51.0 Millimeters

Quantity

people are viewing this right now

Sku : -Tortoise-51.0 Millimeters-A0011381

/** @private {string} */ class SpzCustomAnchorScroll extends SPZ.BaseElement { static deferredMount() { return false; } constructor(element) { super(element); /** @private {Element} */ this.scrollableContainer_ = null; } isLayoutSupported(layout) { return layout == SPZCore.Layout.LOGIC; } buildCallback() { this.viewport_ = this.getViewport(); this.initActions_(); } setTarget(containerId, targetId) { this.containerId = '#' + containerId; this.targetId = '#' + targetId; } scrollToTarget() { const container = document.querySelector(this.containerId); const target = container.querySelector(this.targetId); const {scrollTop} = container; const eleOffsetTop = this.getOffsetTop_(target, container); this.viewport_ .interpolateScrollIntoView_( container, scrollTop, scrollTop + eleOffsetTop ); } initActions_() { this.registerAction( 'scrollToTarget', (invocation) => this.scrollToTarget(invocation?.caller) ); this.registerAction( 'setTarget', (invocation) => this.setTarget(invocation?.args?.containerId, invocation?.args?.targetId) ); } /** * @param {Element} element * @param {Element} container * @return {number} * @private */ getOffsetTop_(element, container) { if (!element./*OK*/ getClientRects().length) { return 0; } const rect = element./*OK*/ getBoundingClientRect(); if (rect.width || rect.height) { return rect.top - container./*OK*/ getBoundingClientRect().top; } return rect.top; } } SPZ.defineElement('spz-custom-anchor-scroll', SpzCustomAnchorScroll);

Shipping

Free worldwide shipping

Free returns

Sustainably made

Secure payments

Description

<p>

节日主题氛围代码帮助商家轻松为店铺增添节日氛围，提升顾客的节庆购物体验。通过简单的代码集成，商家可以在店铺页面展示与节日相关的视觉效果和设计，吸引顾客注意力，从而提高转化率。

</p>

<p>

</p>

<p>

本文所提供代码仅作参考。在使用过程中，如遇前端显示异常，该问题可能是添加的代码与您的主题不适配，或者与您添加的其他代码相互冲突。请即刻删除相关代码，或与您的技术团队取得联系以获取进一步的协助与支持。

</p>

</div>

<span style="font-weight: bold;">圣诞梅花鹿动画效果</span>

</h4>

<p>

<strong>前端展示效果</strong>

</p>

</p>

<p>

<strong>添加下方代码到HTML卡片中，点击此处查看操作路径</strong>

</p>

</div>

</code></pre>

<p>

<strong>添加下方代码到自定义代码嵌入插件中，位置——顶部，触发页面——全部，客户端——全选，点击</strong><a href="https://helpcenter.shoplazza.com/hc/zh-cn/articles/4408566481817"><strong><span class="wysiwyg-underline" style="color: #1155cc;">此处</span></strong></a><strong>查看如何使用自定义代码嵌入插件。</strong>

</p>

.image-container {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

height: auto; /* 可根据需要调整 */

z-index: 1; /* 确保在页面内容的下方 */

}

.santa-claus-38KN6X {

position: absolute;

right: 0;

bottom: 35px;

width: 252px;

height: auto;

animation: 20s linear 0s infinite normal none running cjj;

z-index: 3; /* GIF 动图在前面 */

}

/* 雪地背景 */

.bg-luluzi {

position: absolute;

bottom: 43px;

left: 0;

width: 100%; /* 背景图填满容器 */

height: auto; /* 保持比例 */

z-index: 2; /* 背景图在中间 */

background: url('https://img.staticdj.com/c97ce4d1e88f5e787d55199915ce0657.svg'); /* SVG 作为背景并重复铺满 */

}

@keyframes cjj {

0% {

transform: translateX(100vw);

}

100% {

transform: translateX(-100vw);

}

</style>

</code></pre>

<p>

</p>

<p>请确保将上方代码分别添加到HTML卡片和自定义代码嵌入插件中，以确保其正常生效。</p>

</div>

</h4>

<p>

<strong>前端展示效果</strong>

</p>

</p>

<p>

<strong>添加代码到HTML卡片中，点击此处查看操作路径</strong>

</p>

<p>

</p>

<p>

如果需要修改颜色，可以在new Snowflakes();中加入参数，可以自定义需要的颜色 new Snowflakes({color:

'rgb(255,255,255)'});

</p>

</div>

new Snowflakes({color: 'rgb(255,255,255)'});

</script>

</div>

</code></pre>

</div>

</h4>

<p>

<strong>前端展示效果</strong>

</p>

</p>

<p>

<strong>添加下方代码到HTML卡片中，点击此处查看操作路径</strong>

</p>

</div>

const box=document.getElementById('rainBox');

let boxHeight=box.clientHeight;

let boxWidth=box.clientWidth;

// 页面大小发生变化时，改变盒子大小

window.onresize=function(){

boxHeight=box.clientHeight;

boxWidth=box.clientWidth;

}

// 每隔一段时间,添加雨滴

setInterval(()=>{

const rain=document.createElement('div');

rain.classList.add('rain');

rain.style.top=0;

// 随机刷新雨点位置

rain.style.left=Math.random()*boxWidth+'px';

// 随机雨点透明度

rain.style.opacity=Math.random();

box.appendChild(rain);

// 每隔一段时间,雨水下落

let race=1;

const timer=setInterval(()=>{

// 判断“雨滴”元素的top属性是否超出“盒子”元素的高度来决定是否停止动画

if(parseInt(rain.style.top)>boxHeight){

clearInterval(timer);

box.removeChild(rain);

}

// 每次定时器执行时，“雨滴”元素的top值会逐渐增加，

//并且增加的速率会随着时间的推移而逐渐加快

race++;

rain.style.top=parseInt(rain.style.top)+race+'px'

},20)

},50)

</script>

</code></pre>

<p>

</p>

margin: 0;

padding: 0;

}

.content{

width: 0;

height: 0;

/* 图片链接 */

/* background: url(https://w.wallhaven.cc/full/yx/wallhaven-yxe3jk.jpg) center center no-repeat; */

background-size: 120%;

}

#rainBox{

position: fixed;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

/* 不阻挡其他元素事件触发 */

pointer-events: none;

}

.rain{

position: absolute;

width: 2px;

height: 50px;

background: linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.6));

}

</style>

</code></pre>

<p>

</p>

<p>请确保将上方代码分别添加到HTML卡片和自定义代码嵌入插件中，以确保其正常生效。</p>

</div>

<span style="font-weight: bold;">五彩纸屑效果</span>

</h4>

<p>

<strong>前端展示效果</strong>

</p>

</p>

<p>

<strong>添加代码到HTML卡片中，点击此处查看操作路径</strong>

</p>

var count = 200;

var defaults = {

origin: { y: 0.7 }

};

function fire(particleRatio, opts) {

confetti({

...defaults,

...opts,

particleCount: Math.floor(count * particleRatio)

});

}

fire(0.25, {

spread: 26,

startVelocity: 55,

});

fire(0.2, {

spread: 60,

});

fire(0.35, {

spread: 100,

decay: 0.91,

scalar: 0.8

});

fire(0.1, {

spread: 120,

startVelocity: 25,

decay: 0.92,

scalar: 1.2

});

fire(0.1, {

spread: 120,

startVelocity: 45,

});

</script>

</code></pre>

</div>

<span style="font-weight: bold;">火焰粒子效果</span>

</h4>

<p>

<strong>前端展示效果</strong>

</p>

</p>

<p>

<strong>添加代码到HTML卡片中，点击此处查看操作路径</strong>

</p>

<pre><code class="hljs"> <title>火焰粒子效果</title>

<style>

body, html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

background: black;

position: relative;

}

canvas {

position: fixed;

top: 0;

left: 0;

pointer-events: none;

z-index: 9999;

}

#ai-autoreply {

/* 确保自动回复按钮不会拦截鼠标事件 */

pointer-events: none;

}

</style>

try {

document.addEventListener('DOMContentLoaded', function() {

function createParticleCanvas() {

var canvas = document.createElement('canvas');

canvas.id = 'myCanvas';

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

// Make the canvas occupy the full page

var W = window.innerWidth, H = window.innerHeight;

canvas.width = W;

canvas.height = H;

var particles = [];

var mouse = { x: W / 2, y: H / 2 };

// Create some particles now

var particle_count = 50;

for (var i = 0; i < particle_count; i++) {

particles.push(new particle());

}

// Mouse tracking

window.addEventListener('mousemove', track_mouse, false);

window.addEventListener('scroll', track_scroll, false);

function track_mouse(e) {

var rect = canvas.getBoundingClientRect();

mouse.x = e.clientX - rect.left;

mouse.y = e.clientY - rect.top;

}

function track_scroll() {

var rect = canvas.getBoundingClientRect();

mouse.x = mouse.x - rect.left;

mouse.y = mouse.y - rect.top;

}

function particle() {

this.speed = { x: -1 + Math.random() * 2, y: -5 + Math.random() * 5 };

this.location = { x: mouse.x, y: mouse.y };

this.radius = 5 + Math.random() * 10;

this.life = 10 + Math.random() * 5;

this.remaining_life = this.life;

if (Math.random() > 0.5) {

this.r = 255;

this.g = 165;

this.b = 0;

} else {

do {

this.r = Math.round(Math.random() * 255);

this.g = Math.round(Math.random() * 255);

this.b = Math.round(Math.random() * 255);

} while ((this.r > 200 && this.g > 200 && this.b > 200) || // Avoid white

(this.r < 55 && this.g < 55 && this.b < 55)); // Avoid black

}

function draw() {

ctx.globalCompositeOperation = "source-over";

ctx.clearRect(0, 0, W, H);

ctx.globalCompositeOperation = "lighter";

for (var i = 0; i < particles.length; i++) {

var p = particles[i];

ctx.beginPath();

p.opacity = Math.round(p.remaining_life / p.life * 100) / 100;

var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);

gradient.addColorStop(0, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");

gradient.addColorStop(0.5, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");

gradient.addColorStop(1, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", 0)");

ctx.fillStyle = gradient;

ctx.arc(p.location.x, p.location.y, p.radius, Math.PI * 2, false);

ctx.fill();

p.remaining_life--;

p.radius--;

p.location.x += p.speed.x;

p.location.y += p.speed.y;

if (p.remaining_life < 0 || p.radius < 0) {

particles[i] = new particle();

}

setInterval(draw, 30);

// Adjust canvas size when the window is resized

window.addEventListener('resize', function() {

W = window.innerWidth;

H = window.innerHeight;

canvas.width = W;

canvas.height = H;

});

}

createParticleCanvas();

});

} catch(e){ }

</script>

</code></pre>

</div>

</h4>

<p>

1. 登录您的Shoplazza管理后台，点击<strong>在线商店</strong> > <strong>主题装修，</strong>点击<strong>编辑</strong>按钮。

</p>

</p>

<p>

2. 点击下方<strong>添加卡片</strong>按钮。

</p>

</p>

<p>3. 在卡片列表中找到并点击选择HTML卡片。</p>

</p>

<p>4. 添加完成后，点击已添加的HTML卡片，编辑内容。</p>

</p>

</p>

</div>

</h4>

<p>

<a href="https://helpcenter.shoplazza.com/hc/zh-cn/articles/12822190979993" target="_blank" rel="noopener noreferrer">配置圣诞风格商店风格</a>

</p>

</div>

<p>

<br>

</p>

${data.title}

Anastasia Anastasia

Anastasia Anastasia

Balenciaga Women's Dynasty Sunglasses Tortoise 51.0 Millimeters

Description

You may also like

Recently Viewed

${data.title}

Anastasia Anastasia

Balenciaga Women's Dynasty Sunglasses Tortoise 51.0 Millimeters

Description

Write a Review

How do you like this product?

You may also like

Recently Viewed