html[shopify]每个变体显示多个图像(代码片段)

author author     2023-01-01     698

关键词:

<!-- Begin thumbnails -->
<div class="thumbs clearfix">
  % assign featured_alt = product.selected_or_first_available_variant.option1 %
  % for image in product.images %
  % if image.alt == featured_alt or image == featured_image % 
  % if settings.enable_product_image_zoom %
  <div class="image span2% cycle 'last-in-row': '', '', ' last-in-row' %">
    <a href=" image | product_img_url: '1024x1024' " class="cloud-zoom-gallery">
      <img src=" image | product_img_url: 'medium' " alt=" image.alt | escape " />
    </a>
  </div>
  % else %
  <div class="image span2% cycle 'last-in-row': '', '', ' last-in-row' %">
    <a href=" image | product_img_url: '1024x1024' " data-original-image=" image | product_img_url: '1024x1024' ">
      <img src=" image | product_img_url: 'medium' " alt=" image.alt | escape " />
    </a>
  </div>
  % endif %
  % endif %
  % endfor %
</div>
<!-- End thumbnails -->
<script>
jQuery(document).ready(function($)

var images = [];

% for image in product.images %
  images.push(url: " image | product_img_url: 'medium' ", alt: " image.alt ");
% endfor %

  var thumbnails = $(".thumbs");                         
  $('#product-select-option-0').change(function() 
    var selected = $(this).val(), mainImage = jQuery('.featured img').attr('src').replace('_1024x1024', '_medium');
    thumbnails.hide().html("");
    arr = [];

    var addImage = $.each( images, function( i, image ) 
      var alt = images[i].alt, url = images[i].url;   
      if (alt == selected || url == mainImage) 
        thumbnails.append('<div class="image span2"><a href="' + url.replace('_medium', '_1024x1024') + '" data-original-image="' + url.replace('_medium', '_1024x1024') + '"><img src="' + url + '" alt="' + alt + '"></a></div>');
      
    );
    arr.push(addImage);
    $.when.apply($, arr).done(function () 
      thumbnails.fadeIn(); 
      $('#product .thumbs a').on('click', function(e)  
        e.preventDefault();
        switchImage($(this).attr('href'), null, $('.featured img')[0]);
      );
    );
  );
);    
</script>

Shopify - 通过多个变体 ID 检索多个变体详细信息

】Shopify-通过多个变体ID检索多个变体详细信息【英文标题】:Shopify-Retrievesmultiplevariantdetailbymultiplevariantid【发布时间】:2019-05-0309:02:37【问题描述】:有没有办法在单个shopify调用中使用多个变体ID获取多个变体详细信息。实际... 查看详情

shopify 产品的颜色样本/变体下拉列表

】shopify产品的颜色样本/变体下拉列表【英文标题】:ColorSwatch/Variantdropdownlistforshopifyproducts【发布时间】:2013-09-2410:00:39【问题描述】:我打算做的是为产品“颜色”变体做一个下拉列表,但是与选项值有某种关联,会显示图像... 查看详情

Shopify- 获取属性形式 <select>

】Shopify-获取属性形式<select>【英文标题】:Shopify-gettingattributeform<select>【发布时间】:2021-10-0522:28:33【问题描述】:所以我有一个问题。我正在Sopify中开发一家商店,并且我有一个自定义部分,其中我有用于选择变体... 查看详情

Shopify 在选择变体时触发功能,但不会覆盖现有功能

】Shopify在选择变体时触发功能,但不会覆盖现有功能【英文标题】:Shopifytriggerfunctiononvariantselectionbutdon\'toverrideexistingfunctionality【发布时间】:2019-11-1023:20:58【问题描述】:我在Shopify上使用“阁楼”主题。当我在产品页面上选... 查看详情

Shopify 变体价格现在正确显示

】Shopify变体价格现在正确显示【英文标题】:ShopifyVariantPriceNowShowingCorrectly【发布时间】:2020-03-0909:54:06【问题描述】:这看起来很简单,但无论出于何种原因,我都看不到森林中的树木。所以我在屏幕截图1中看到了当前情况... 查看详情

使用布鲁克林主题在 Shopify 的收藏页面上显示所有颜色变体

】使用布鲁克林主题在Shopify的收藏页面上显示所有颜色变体【英文标题】:ShowAllColorVariantsonCollectionpageinShopifyusing***lynTheme【发布时间】:2016-05-1509:28:20【问题描述】:嘿,我在我的shopify网站上使用***lyn主题。我有不同的产品会... 查看详情

Shopify - 将尺寸变体从选择下拉菜单更改为按钮

】Shopify-将尺寸变体从选择下拉菜单更改为按钮【英文标题】:Shopify-Changesizevariantfromselectdropdowntobuttons【发布时间】:2020-07-2807:13:45【问题描述】:我想将我的变体显示从下拉(选择)更改为使用按钮。我在网上其他地方找不到... 查看详情

Shopify 主题开发 |从选择列表中选择不同的产品变体时更新价格

】Shopify主题开发|从选择列表中选择不同的产品变体时更新价格【英文标题】:ShopifyThemeDevelopment|Updatingpricewhendifferentproductvariantischosenfromselectlist【发布时间】:2020-02-2017:51:00【问题描述】:当从其他产品选项的选择下拉列表中... 查看详情

在 Shopify 产品页面上显示一种颜色选项

】在Shopify产品页面上显示一种颜色选项【英文标题】:DisplayonecolouroptiononShopifyproductpage【发布时间】:2021-01-1810:47:02【问题描述】:我试图在任何时候只显示我产品的一种颜色变体。当我手动为每种产品颜色分配图像时,我可... 查看详情

html教程:woocommerce:显示每个产品变体的动态内容(代码片段)

查看详情

尝试在 Shopify 中添加变体时出错

】尝试在Shopify中添加变体时出错【英文标题】:ErrorwhentryingtoaddavariantinShopify【发布时间】:2017-02-0813:42:27【问题描述】:我正在尝试向现有产品ID添加一个变体。下面是我完成的JSON请求。但是我得到一个错误"errors":"variant":"expec... 查看详情

在 Shopify 中选择新变体时价格未更新

】在Shopify中选择新变体时价格未更新【英文标题】:PricenotupdatingwhenselectinganewvariantinShopify【发布时间】:2020-11-2016:04:44【问题描述】:我正在尝试编辑Debut主题以更好地满足我客户的需求。每当我在product-template.liquid文件中编辑... 查看详情

html更新购物车页面上图像的脚本,以显示在变体图像应用程序中选择的正确缩略图。(代码片段)

查看详情

使用 Shopify 在 Collection 页面上筛选变体

】使用Shopify在Collection页面上筛选变体【英文标题】:VariantfilteronCollectionpageswithShopify【发布时间】:2017-12-2223:22:28【问题描述】:我正在尝试在我的收藏页面中设置过滤器。到目前为止,我设法设置了一个很棒的自定义标签过... 查看详情

javascript变体的多个图像(代码片段)

查看详情

javascript变体的多个图像(代码片段)

查看详情

WooCommerce 变体图像未显示

】WooCommerce变体图像未显示【英文标题】:WooCommerceVariationImagesnotdisplaying【发布时间】:2017-01-2716:29:01【问题描述】:在单个产品页面上,当我选择一种颜色时,特色图像不会改变。WordPress已更新至4.6.1,WooCommerce已更新至2.6.2,S... 查看详情

向每个 Shopify 产品系列页面添加图片横幅

】向每个Shopify产品系列页面添加图片横幅【英文标题】:AddinganImageBannertoEachShopifyCollectionPage【发布时间】:2020-06-2920:49:00【问题描述】:我需要一些帮助。我正在为使用Shopify的客户开发一个网站。网站需要根据创建集合时上传... 查看详情