[英]if/else statement for shopify cart.item_count
I have found some similar questions on this site and others, but none seem to provide the solution I am looking for (or I am just not seeing it clearly) and I could really use some guidance. 我在本网站和其他网站上发现了一些类似的问题,但是似乎没有一个问题可以提供我正在寻找的解决方案(或者我只是看不清楚),因此我可以使用一些指导。
I have a Shopify theme that has been modified to include two mega dropdown menus, each of which requires a specific (negative) left margin for proper alignment. 我有一个Shopify主题 ,该主题已修改为包括两个大型下拉菜单,每个菜单都需要一个特定的(负数)左边界以正确对齐。 I am using the following code to set these margins: 我正在使用以下代码设置这些边距:
<script>
$(document).ready(function(){
$(".site-nav li ul:eq(0)").css("left","-411%");
$(".site-nav li ul:eq(1)").css("left","-670%");
if ($(window).width()<768) {
$(".site-nav li ul").css("left","auto");
}
$(window).on('resize', function() {
if ($(window).width()<768) {
$(".site-nav li ul").css("left","auto");
}
});
});
</script>
The problem I'm having is that when someone adds an item to the cart a cart icon is added to the navar which throws off the alignment of the dropdown menus. 我遇到的问题是,当有人向购物车中添加商品时,购物车图标会添加到导航栏中,这会导致下拉菜单的对齐方式失效。
I have tried various CSS edits to no avail and am looking for an if/else statement that will change the left margin when an item is added to the cart. 我尝试了各种CSS编辑,但无济于事,我正在寻找一个if / else语句,该语句会在将商品添加到购物车时更改左侧的边距。
Here is the altered code I am trying to implement in order to meet this objective: 这是我为了实现此目标而尝试实现的更改代码:
<script>
$(document).ready(function(){
if (cart.item_count > 0) {
$(".site-nav li ul:eq(0)").css("left","-351%");
$(".site-nav li ul:eq(1)").css("left","-610%");
}
else {
$(".site-nav li ul:eq(0)").css("left","-411%");
$(".site-nav li ul:eq(1)").css("left","-670%");
}
if ($(window).width()<768) {
$(".site-nav li ul").css("left","auto");
}
$(window).on('resize', function() {
if ($(window).width()<768) {
$(".site-nav li ul").css("left","auto");
}
});
});
</script>
This does not work and as I am less than proficient with Javascript, I am unclear as to what I am doing wrong. 这是行不通的,并且由于我不精通Javascript,因此我不清楚自己在做什么错。 Any help that you can provide would be greatly appreciated. 您可以提供的任何帮助将不胜感激。
Thanks, 谢谢,
This is somewhat speculative since I don't use shopify, but you are hooking into the wrong event. 因为我不使用shopify,所以这有点投机,但是您陷入了错误的事件。 document.ready only fires onLoad, so you need to attach to the item added to the cart event. document.ready仅会触发onLoad,因此您需要附加到添加到购物车事件的项目。 I imagine something like this would work. 我想象这样的事情会起作用。
$(document).ready(function(){
// Other stuff.
// Reference to Shopify
Shopify.onItemAdded = function(line_item) {
$(".site-nav li ul:eq(0)").css("left","-351%");
$(".site-nav li ul:eq(1)").css("left","-610%");
};
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.