# Shopify 2nd development

**Repository Path**: arlenlin04/shopify-2nd-development

## Basic Information

- **Project Name**: Shopify 2nd development
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-09
- **Last Updated**: 2025-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 ###  sections/review-slider.liquid
 - 这里是列表文本模板配置 ({% schema %} 部分):
    名称：顾客评价滑动区块
    设置：
    section_title：区块标题，默认为“顾客评价”。
    块 (blocks)：
    类型为 review 的块，包含以下设置项：
    avatar：用户头像选择器。
    username：用户名，默认为“匿名用户”。
    rating：评分范围从 1 到 5，步长为 1，默认为 5。
    content：评价内容，默认为“This product is very useful and highly recommended!”
    预设 (presets)：
    名称为“顾客评价滑动区块”，类别为“Custom”，默认包含三个 review 类型的块。


- JavaScript 功能:
    初始化滑动效果，并提供自动轮播功能。
    点击指示点可以切换到相应的评价卡片。
    支持触摸滑动操作。
    在鼠标悬停时暂停自动轮播，离开时恢复。
    响应窗口大小变化，重新计算卡片宽度并更新滑动位置。

### stickyBuyBar.liquid

- HTML 结构
    容器：<div class="sticky-buy-bar" id="stickyBuyBar">
    包含一个子容器 <div class="sticky-buy-content">，用于布局产品信息和添加到购物车按钮。
    产品信息：
    产品标题：<h3 class="product-title">{{ product.title }}</h3>
    产品价格：<div class="product-price">{{ product.price | money }}</div>
    如果有比较价格（原价）且高于当前价格，则显示比较价格：<span class="compare-price">{{ product.compare_at_price | money }}</span>
    添加到购物车按钮：<button class="add-to-cart-btn" type="button" onclick="document.querySelector('form[action="/cart/add"]').submit()">Add Cart</button>


- JavaScript 功能
    滚动事件监听：
        只在屏幕宽度小于 980px 时启用（即移动设备）。
        监听滚动事件，当向下滚动超过 200px 时显示购物栏。
        当向上滚动到顶部附近时隐藏购物栏。
    添加到购物车按钮点击事件：
        为购物栏中的“Add Cart”按钮添加点击事件，点击时提交表单 form[action="/cart/add"]