Question

我正在尝试在页面上添加Shopify购买按钮，并且我需要一种产品具有与其他产品不同的样式。通过使用HTML数据属性和JS查找产品，我将产品动态添加到页面中。

这是页面html的代码（它是Wordpress主题）：

<?php
get_header(); 
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
$thumb_url = $thumb_url_array[0];
$postcat = get_the_category( $post->ID );
?>
<div class="individualProduct" >
    <div class="grid-container">
        <div class="grid-x">
            <div class="cell small-7 text-left">
                <div class="productsHeader">
                    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                        <div class="doubleUnderline"><h1><?php the_title(); ?></h1></div>

                        <div class="cell product-cell text-center">
                            <div data-shopify-product="<?php the_field('product_id'); ?>"></div>
                        </div>
                    <?php endwhile; endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>
<h4 class="text-center suggested">Suggested Products</h4>
<div class="grid-container " id="reveal<?php echo $post_type; ?>Rotator">
    <div class="rotator"> 
        <div class="products-rotator grid-x text-center"> 
            <?php 
                $args = array(
                    'post_type' => 'products',
                    'category_name'  => $post_type
                );
                $query = new WP_Query( $args );

                if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post();  ?>

                <div class="cell product-cell text-center">
                    <div data-shopify-product="<?php the_field('product_id'); ?>"></div>
                </div>
            <?php endwhile; endif; wp_reset_postdata(); ?>
        </div>
    </div>
</div>

以下是添加购买按钮的JS：

jQuery(document).ready(function(){

var client = ShopifyBuy.buildClient({
    domain: 'javahouse.myshopify.com',
    apiKey: '4ade8ca9ddca38854c3b72ca40633244',
    appId: '6'
});

var ui = ShopifyBuy.UI.init(client);

var buttonStyles = {
    //'width':'70%',
    'background-color':'rgba(196, 137, 0, 0.75)',
    ':hover': {
      'background-color': 'rgba(196, 137, 0, 1)'
    },
    ':focus': {
      'background-color': 'rgba(196, 137, 0, 1)'
    }
  }

var productNodes = document.querySelectorAll('[data-shopify-product]');
Array.prototype.slice.call(productNodes).forEach(function (node) {
    var productId = node.dataset.shopifyProduct;
    ui.createComponent('product', {
        id: productId,
        node: node,
        options:{
            product:{
                // buttonDestination: 'modal',
                contents:{
                    options:false,
                },
                text:{
                    button: "Add to Cart"
                },
                styles:{
                    button: buttonStyles    
                }
            }
        }
    });
});
});

我需要加载到“产品单元” div中的产品与“建议产品”旋转器中的产品看起来不同。我尝试将其设置为其他数据属性，并为其添加具有不同变量的相同JS，但这会导致错误。

同一页面上Shopify购买按钮的样式不同

0 个答案: