提问人：John Smith 提问时间：11/15/2023 最后编辑：John Smith 更新时间：11/22/2023 访问量：123
需要缩短包含长文本的嵌入式 shopify 购买按钮变体下拉列表的宽度
Need to shorten the width of an embedded shopify buy button variant drop down that has long text
问：
从本质上讲，我在商店页面上嵌入了购买按钮。通常，当产品具有多属性时，这些多属性的名称只是服装尺码（S、M、L、XL、2XL 等），因此多属性的名称非常短。我现在有一个具有 LONG 变体名称的产品，这些较长的名称正在拉伸变体下拉列表的宽度。相反，我需要带有 LONG NAME 变体的下拉列表的宽度与带有 SHORT NAME 变体的下拉列表的宽度完全相同。我想不通......似乎无论我在嵌入式代码中添加什么新的宽度样式，长名称都会迫使下拉列表仍然保持长...也许我只是没有将新的宽度样式添加到嵌入代码中的正确区域？
这是一个 JS 小提琴，展示了正在发生的事情 - https://jsfiddle.net/t7bdv601/4/
这是所有的代码——
<body>
<div id="horizontalstorecontainer">
<div class="store-scrolling-wrapper">
<div class="clothingcard2">
<div class="productwrapperclothing">
<div class="animationwrapperclothing">
<a href="/test">
<img src="https://www.missingnewyork.com/images/glow-joker-hoodie-by-missing-store.jpg" alt="." class="clothing" />
</a>
</div>
<div class="itemandpricewrapperclothing">
<a href="/test">
<h1>LONG NAME VARIANTS</h1>
</a>
<h2>$ 20.00</h2>
</div>
</div>
<div id="bf3">
<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();
}
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: 'missingnewyork.myshopify.com',
storefrontAccessToken: '8ad1e9d2d113621e1e9785f5a84b7330',
});
ShopifyBuy.UI.onReady(client).then(function(ui) {
ui.createComponent('product', {
id: '7011046490178',
node: document.getElementById('bf3'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "20px",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"padding-left": "0px",
"padding-right": "0px",
"width": "60%",
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
}
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"outOfStock": "SOLD OUT"
},
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "20px",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
}
},
"text": {
"button": "ADD TO CART"
}
},
"cart": {
"styles": {
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
"title": {
"color": "#ffffff"
},
"header": {
"color": "#ffffff"
},
"lineItems": {
"color": "#ffffff"
},
"subtotalText": {
"color": "#ffffff"
},
"subtotal": {
"color": "#ffffff"
},
"notice": {
"color": "#ffffff"
},
"currency": {
"color": "#ffffff"
},
"close": {
"color": "#ffffff",
":hover": {
"color": "#ffffff"
}
},
"empty": {
"color": "#ffffff"
},
"noteDescription": {
"color": "#ffffff"
},
"discountText": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"discountAmount": {
"color": "#ffffff"
},
"cart": {
"background-color": "#000000"
},
"footer": {
"background-color": "#000000"
}
},
"text": {
"title": "CART",
"empty": "YOUR CART IS EMPTY.",
"notice": "Shipping and taxes are added at checkout.",
}
},
"toggle": {
"styles": {
"toggle": {
"font-weight": "bold",
"background-color": "#ffffff",
":hover": {
"background-color": "#e6e6e6"
},
":focus": {
"background-color": "#e6e6e6"
}
},
"count": {
"color": "#000000",
":hover": {
"color": "#000000"
}
},
"iconPath": {
"fill": "#000000"
}
}
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#ffffff"
},
"title": {
"color": "#ffffff"
},
"price": {
"color": "#ffffff"
},
"fullPrice": {
"color": "#ffffff"
},
"discount": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"quantity": {
"color": "#ffffff"
},
"quantityIncrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityDecrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityInput": {
"color": "#ffffff",
"border-color": "#ffffff"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
</div>
</div>
<div class="clothingcard2">
<div class="productwrapperclothing">
<div class="animationwrapperclothing">
<a href="/test">
<img src="https://www.missingnewyork.com/images/glow-joker-hoodie-by-missing-store.jpg" alt="." class="clothing" />
</a>
</div>
<div class="itemandpricewrapperclothing">
<a href="/test">
<h1>SHORT NAME VARIANTS</h1>
</a>
<h2>$ 20.00</h2>
</div>
</div>
<div id="gjh">
<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();
}
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: 'missingnewyork.myshopify.com',
storefrontAccessToken: '8ad1e9d2d113621e1e9785f5a84b7330',
});
ShopifyBuy.UI.onReady(client).then(function(ui) {
ui.createComponent('product', {
id: '6969282134082',
node: document.getElementById('gjh'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"option": {
"styles": {
"wrapper": {
"border": "0px",
"border-radius": "5px",
"position": "absolute",
"height": "42px",
"bottom": "0px",
"width": "100px",
"padding": "3px"
}
}
},
"product": {
"styles": {
"buttonWrapper": {
"margin-left": "40%"
},
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "0px"
}
},
"button": {
"padding-left": "0px",
"padding-right": "0px",
"width": "100%",
"right": "0",
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
},
"option": {
"display": "inline-block",
"width": "20px",
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"outOfStock": "SOLD OUT"
},
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
}
},
"text": {
"button": "ADD TO CART"
}
},
"cart": {
"styles": {
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
"title": {
"color": "#ffffff"
},
"header": {
"color": "#ffffff"
},
"lineItems": {
"color": "#ffffff"
},
"subtotalText": {
"color": "#ffffff"
},
"subtotal": {
"color": "#ffffff"
},
"notice": {
"color": "#ffffff"
},
"currency": {
"color": "#ffffff"
},
"close": {
"color": "#ffffff",
":hover": {
"color": "#ffffff"
}
},
"empty": {
"color": "#ffffff"
},
"noteDescription": {
"color": "#ffffff"
},
"discountText": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"discountAmount": {
"color": "#ffffff"
},
"cart": {
"background-color": "#000000"
},
"footer": {
"background-color": "#000000"
}
},
"text": {
"title": "CART",
"empty": "YOUR CART IS EMPTY.",
"notice": "Shipping and taxes are added at checkout.",
}
},
"toggle": {
"styles": {
"toggle": {
"font-weight": "bold",
"background-color": "#ffffff",
":hover": {
"background-color": "#e6e6e6"
},
":focus": {
"background-color": "#e6e6e6"
}
},
"count": {
"color": "#000000",
":hover": {
"color": "#000000"
}
},
"iconPath": {
"fill": "#000000"
}
}
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#ffffff"
},
"title": {
"color": "#ffffff"
},
"price": {
"color": "#ffffff"
},
"fullPrice": {
"color": "#ffffff"
},
"discount": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"quantity": {
"color": "#ffffff"
},
"quantityIncrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityDecrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityInput": {
"color": "#ffffff",
"border-color": "#ffffff"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
</div>
</div>
</div>
</div>
</body>
还有 CSS -
body {
background: black !important;
}
::-webkit-scrollbar {
height: .88vh;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: white;
}
::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
#horizontalstorecontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.store-scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
margin: 0 auto;
height: 100%;
width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.clothingcard2 {
display: inline-block;
position: relative;
height: 60%;
width: 35%;
top: 50.6%;
transform: translateY(-50%);
}
.clothingcard2 img {
height: 100%;
}
.productwrapperclothing {
top: 0;
width: 100%;
display: inline-block;
height: calc(100% - 42px);
}
#bf3,
#gjh {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.animationwrapperclothing {
height: calc(100% - 66.4px);
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
-o-perspective: 2000px;
perspective: 2000px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.clothing {
margin: 0 auto;
position: relative;
height: 100%;
width: auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
bottom: 0;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 1px solid transparent;
}
.animationwrapperclothing>a {
height: 100%;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.itemandpricewrapperclothing {
position: fixed;
width: 100%;
bottom: 42px;
margin: 0 auto;
right: 0;
left: 0;
}
.itemandpricewrapperclothing>a {
display: inline-block;
list-style: none;
text-decoration: none;
}
h1 {
font-family: neue-haas-grotesk-text, sans-serif;
color: white;
font-weight: 500;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 13px;
}
h2 {
font-family: neue-haas-grotesk-text, sans-serif;
color: #7e7e7e;
font-weight: 500;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 12px;
margin-top: -4px;
}
@media screen and (orientation: portrait) {
.clothingcard2 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-right: 0;
}
.clothingcard2 img {
max-width: 95%;
max-height: 100%;
height: auto;
width: auto;
}
.productwrapperclothing {
padding: 0;
}
}
请注意，我已将 LONG NAME VARIANT 产品嵌入式代码中的“max-width”更改为非常小的（仅 20px），而不是 SHORT NAME VARIANT 宽度的设置（即“calc（25% - 20px）”）......但它仍然根本没有改变 LONG NAME VARIANT 下拉列表的宽度......无论如何，我都不希望它是 20px，我需要它与 SHORT NAME 变体产品的宽度完全相同，但我刚刚将其更改为 20px 以测试试图找到我可以实际更改下拉列表宽度的位置，但我似乎根本无法让它更短......
澄清一下，我知道当 LONG NAME VARIANT 下拉列表的宽度与 SHORT NAME VARIANT 下拉列表一样短时，文本会被截断......这没关系。我仍然需要 LONG NAME VARIANT 下拉列表与 SHORT NAME VARIANT 下拉列表的宽度相同，但仅在单击它之前......然后在单击下拉列表后，我需要它调整大小，以便文本不会被截断。
编辑 - 我真的需要这些更改直接在嵌入式购买按钮中实现，而不是在 CSS 中实现......除非有一种方法可以在CSS中更改样式，而不会影响网上商店中的所有其他购买按钮。这些新样式应仅影响具有 LONG 变体名称的产品。页面上所有其他购买按钮的样式需要与 JSFiddle 上的 SHORT 变体名称产品完全相同（在 JSFiddle 中，为了简单起见，我只显示了 1 个其他产品，但在实际的商店页面上有 20+ 个其他产品）。
答：
0赞
Tim R
11/20/2023
#1
我在开发人员工具中使用 Flexbox 并调整了一些样式来实现了这一点。但是，我不知道如何在您的 Shopify JavaScript 中实施更改。以下是需要修改的 CSS 规则：
/* remove this rule as it causes overlay
#bf3,
#gjh {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
} */
.shopify-buy__product {
display: flex;
}
.shopify-buy__layout-vertical .shopify-buy__product__variant-selectors {
margin-top: 20px;
}
.shopify-buy__option-select-wrapper {
padding: 5px 0;
}
.shopify-buy__btn {
text-wrap: nowrap;
/* padding-left: 0px; */
/* padding-right: 0px; */
/* width: 60%; */
}
评论
0赞
John Smith
11/21/2023
谢谢，真的很感谢你的帮助！不过，我正在努力让它在 JSfiddle 中工作。也许我没有正确添加您的代码？看来下拉菜单的宽度仍然太长了......真正的目标是将其直接实施到 Shopify Javascript 中，因为我在商店页面上还有很多其他购买按钮，我需要这些新样式来影响这些按钮。jsfiddle.net/L2gxro4t
0赞
John Smith
11/22/2023
#2
我觉得自己真的很傻。这就是我需要添加到 iframe 以完成我需要完成的全部内容 -
"option": {
"styles": {
"wrapper": {
"border": "0px",
"border-radius": "5px",
"position": "absolute",
"height": "42px",
"bottom": "0px",
"width": "100px",
"padding": "3px"
我曾以为 LONG 名称变体产品和 SHORT 名称变体产品的代码完全相同，但它们根本不是。我不小心复制了 LONG 名称变体产品的错误代码。这就是为什么它没有正确行动的原因。现在羞愧地打字。
评论
0赞
Tim R
11/22/2023
我注意到“短”列表位于按钮的空白处。这是一个老式的黑客，Flexbox使它变得不必要
评论