我目前正在使用 Shopify Buy Button .
在大多数情况下，我只是复制并粘贴了嵌入代码，并没有做太多改动。如果您一直向下滚动到 "toggle":{，您会注意到我将 iframe 和 sticky 设置为 假。
将产品添加到购物车后，正文中会出现一个用于切换购物车的按钮。 .shopify-buy-frame.shopify-buy-frame--切换
它通常显示为屏幕右中 Angular 的固定 div 但由于我的 sticky 选项设置为 false，它被放置在屏幕的底部正文。
我希望能够分配这个切换按钮最终所在的父容器。理想情况下，我想把它放在我的标题中的某个地方，而不是让它在我的页面正文底部生成。
例如:
<body>
<header>
<div id="cart-toggle">
<!-- THIS IS WHERE I WANT IT TO APPEAR -->
</div>
<header>
<!-- THIS IS WHERE IT APPEARS -->
</body>
奖励积分如果我能弄清楚如何为我的移动导航区域生成第二个切换按钮。
我搜索了 default compenents和 developer section对于切换选项，似乎无法弄清楚。
如果有人能提供帮助，我们将不胜感激。
我的嵌入代码
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy){if(window.ShopifyBuy.UI){ShopifyBuyInit();}else{loadScript();}}else{loadScript();}f
function loadScript() {var script = document.createElement('script');script.async = true;script.src = scriptURL;(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);script.onload = ShopifyBuyInit;}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({domain: 'domain.myshopify.com',apiKey: 'apikey',appId: '0'});
ShopifyBuy.UI.onReady(client).then(function(ui){ui.createComponent('product',{moneyFormat:'%24%7B%7Bamount%7D%7D',
options:{
"product":{
"variantId":"all",
"width":"240px",
"contents":{
"img":false,
"imgWithCarousel":false,
"title":false,
"variantTitle":false,
"price":false,
"description":false,
"buttonWithQuantity":false,
"quantity":false
},
"text":{
"button":"ADD TO BAG"
},
"styles":{
"product":{
"text-align":"left",
"@media(min-width:601px)":{
"max-width":"100%",
"margin-left":"0",
"margin-bottom":"50px"
}
},
"button":{
"background-color":"#393a39",
"font-family":"Lato,sans-serif",
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px",
"padding-left":"35px",
"padding-right":"35px",
":hover":{
"background-color":"#333433"
},
"border-radius":"0px",
":focus":{
"background-color":"#333433"
},
"font-weight":"normal"
},
"title":{
"font-size":"26px"
},
"price":{
"font-size":"18px"
},
"quantityInput":{
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px"
},
"compareAt":{
"font-size":"15px"
}
},
"googleFonts":[
"Lato"
]
},
"cart":{
"contents":{
"button":true
},
"text":{
"title":"Bag"
},
"styles":{
"button":{
"background-color":"#393a39",
"font-family":"Lato,sans-serif",
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px",
":hover":{
"background-color":"#333433"
},
"border-radius":"0px",
":focus":{
"background-color":"#333433"
},
"font-weight":"normal"
},
"footer":{
"background-color":"#ffffff"
}
},
"googleFonts":[
"Lato"
]
},
"modalProduct":{
"contents":{
"img":false,
"imgWithCarousel":true,
"variantTitle":false,
"buttonWithQuantity":true,
"button":false,
"quantity":false
},
"styles":{
"product":{
"@media(min-width:601px)":{
"max-width":"100%",
"margin-left":"0px",
"margin-bottom":"0px"
}
},
"button":{
"background-color":"#393a39",
"font-family":"Lato,sans-serif",
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px",
"padding-left":"35px",
"padding-right":"35px",
":hover":{
"background-color":"#333433"
},
"border-radius":"0px",
":focus":{
"background-color":"#333433"
},
"font-weight":"normal"
},
"quantityInput":{
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px"
}
},
"googleFonts":[
"Lato"
]
},
"toggle": {
"iframe":false,
"sticky":false,
"contents":{
"icon":true,
"title":false
},
"styles":{
"toggle":{
"font-family":"Lato,sans-serif",
"background-color":"#393a39",
":hover":{
"background-color":"#333433"
},
":focus":{
"background-color":"#333433"
},
"font-weight":"normal"
},
"count":{
"font-size":"13px"
}
},
"googleFonts":[
"Lato"
]
},
"productSet":{
"styles":{
"products":{
"@media(min-width:601px)":{
"margin-left":"-20px"
}
}
}
}
}
}
);});}
})();
/*]]>*/
</script>
最佳答案
您可以使用 events toggle 配置中的选项来定义您需要的事件。使用 afterInit 事件在初始化后将切换节点移动到另一个地方:
toggle: {
events: {
afterInit: function (component) {
document.getElementById('cart-toggle').appendChild(component.node);
},
}
}
我假设您不能在单个 Shopify 嵌入中创建两个 toggle 组件。但是您可以使用 JS 中的媒体查询(即 enquire.js )对现有的进行操作，因此当您的媒体查询匹配/不匹配时，您可以将切换按钮移动到 DOM 中任何您喜欢的位置(即移动导航区域内)
关于javascript - Shopify 切换购物车按钮位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44480754/
我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗？此外，仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件？谢谢! 最佳答案 是的，您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题，删除public/index/h
我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束
我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1
我想在heroku.com上查看我的应用程序日志的内容，所以我关注了thisexcellentadvice并拥有我所有的日志内容。但是我现在很想知道我的日志文件实际在哪里，因为“log/production.log”似乎是空的:C:\>herokuconsoleRubyconsoleforajpbrevx.heroku.com>>files=Dir.glob("*")=>["public","tmp","spec","Rakefile","doc","config.ru","app","config","lib","README","Gemfile.lock","vendor","sc
这应该是一个简单的问题，但我找不到任何相关信息。给定一个Ruby中的正则表达式，对于每个匹配项，我需要检索匹配的模式$1、$2，但我还需要匹配位置。我知道=~运算符为我提供了第一个匹配项的位置，而string.scan(/regex/)为我提供了所有匹配模式。如果可能，我需要在同一步骤中获得两个结果。 最佳答案 MatchDatastring.scan(regex)do$1#Patternatfirstposition$2#Patternatsecondposition$~.offset(1)#Startingandendingpo
我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。 最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位
基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub
我在ruby表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮，我们在St