如何将单独的“Paypal 添加到购物车”分配给单独的 html 复选框

Question

我有一个复选框设置，可以根据您单击的复选框更改图像（显示不同的颜色）。

我想为每个复选框分配一个单独的“PayPal 添加到购物车”，以便查看者选择颜色，然后单击 PayPal 按钮购买所选商品。

HTML 代码：

    <div class="colors">
    <div class="ColourLabel"><div class="c5"></div><span>Moonwalk<br>Grey</span></div>
    <div class="ColourLabel"><div class="c9"></div><span>Midnight<br>Black</span></div>
    <div class="ColourLabel"><div class="c10"></div><span>Volcanic<br>Orange</span></div>
    <div class="ColourLabel"><div class="c11"></div><span>Chili<br>Red</span></div>
    <div class="ColourLabel"><div class="c12"></div><span>Lapisluxury<br>Blue</span></div>
    <div class="ColourLabel"><div class="c13"></div><span>Thunder<br>Grey</span></div>
    <div class="ColourLabel"><div class="c7"></div><span>British Racing<br>Green</span></div>
    <div class="ColourLabel"><div class="c8"></div><span>Blazing<br>Red</span></div>
    <div class="ColourLabel"><div class="c2"></div><span>Pepper<br>White</span></div>
    <div class="ColourLabel"><div class="c3"></div><span>White<br>Silver</span></div>
    </div>

脚本代码片段：

    $(".product2 .c5").click(function(){
    $(".product2 .c1").css("box-shadow","none");
    $(".product2 .c2").css("box-shadow","none");
    $(".product2 .c3").css("box-shadow","none");
    $(".product2 .c4").css("box-shadow","none");
    $(".product2 .c5").css("box-shadow","0 0 0 2px #0D1F2D, 0 0 0 3.5px #CB3843");
    $(".product2 .c6").css("box-shadow","none");
    $(".product2 .c7").css("box-shadow","none");
    $(".product2 .c8").css("box-shadow","none");
    $(".product2 .c9").css("box-shadow","none");
    $(".h2").animate({opacity:0},function(){
    $(".h2").attr("src","img/Ark/ARK MG.webp");
    });
    $(".h2").animate({opacity:1});
    });

已尝试像这样分配 Paypal 容器，但它只会显示行中的第一个：

    <div id="paypal-container-SOME-ID">
    <div class="ColourLabel"><div class="c5"></div><span>Moonwalk<br>Grey</span></div>
    </div>
    <div id="paypal-container-ANOTHER-ID">
    <div class="ColourLabel"><div class="c9"></div><span>Midnight<br>Black</span></div>
    </div>

Paypal 脚本如下：

    <script src="https://www.paypal.com/sdk/js?client-id=MY-ID&components=hosted-buttons&disable-funding=venmo&currency=GBP"></script>
    <script>
    paypal.HostedButtons({
    hostedButtonId: "SOME-ID",
    }).render("#paypal-container-SOME-ID")
    </script>
    <script>
    paypal.HostedButtons({
    hostedButtonId: "ANOTHER-ID",
    }).render("paypal-container-ANOTHER-ID")
    </script>

我愿意接受建议，作为解决此问题的更好方法，因为这对用户来说似乎非常混乱 - 选择一个复选框来查看项目 - 然后必须使用下拉菜单（在 Paypal 按钮中设置）来购买项目？

（我已附上我的意思的屏幕截图）

谢谢

现在可以使用 JavaScript 了：

$(".product2 .c5").click(function(){
$(".product2 .c1").css("box-shadow","none");
$(".product2 .c2").css("box-shadow","none");
$(".product2 .c3").css("box-shadow","none");
$(".product2 .c4").css("box-shadow","none");
$(".product2 .c5").css("box-shadow","0 0 0 2px #0D1F2D, 0 0 0 3.5px #CB3843");
$(".product2 .c6").css("box-shadow","none");
$(".product2 .c7").css("box-shadow","none");
$(".product2 .c8").css("box-shadow","none");
$(".product2 .c9").css("box-shadow","none");
$(".product2 .c10").css("box-shadow","none");
$(".product2 .c11").css("box-shadow","none");
$(".product2 .c12").css("box-shadow","none");
$(".product2 .c13").css("box-shadow","none");
$(".product2 .c14").css("box-shadow","none");
$(".PpButton .c145").animate({opacity:0},function(){
document.body.insertAdjacentHTML(
'beforeend',
'<a href="https://www.paypal.com/ncp/payment/LINK" target="_blank"><img class".PpButton" src="img/Web/paypal.webp"></a>');});
$(".PpButton .c145").animate({opacity:1});
$(".h2").animate({opacity:0},function(){
$(".h2").attr("src","img/Ark/ARK MG.webp");
});
$(".h2").animate({opacity:1});
});

修改了 javascript 代码 - 显示每个 .product2 .c(number) 的单独 Paypal 按钮。

Href 链接必须为_blank，否则 Paypal 不会接受。

Answer 1

这会有点麻烦，因为“支付链接或按钮”托管按钮的设计目的不是传递在其外部选择的数据，但可以检查渲染的 HTML 并编写 javascript，以便在复选框被选中时相应地调整所选的下拉列表。点击。

但是，当您问题中的值被混淆时，没有人可以尝试为您执行此操作。

---

至少可以说，为每种颜色创建托管按钮并仅根据所选颜色显示一个按钮的替代解决方案会更加尴尬。

带有后端的标准结账提供了比托管按钮更大的灵活性。然而，它显然需要一个调用 PayPal API 的后端。