Liquid、JavaScriptなどに関する質問
他のページは問題ないのですが、カートページだけ崩れます。
https://zakkyobiru.myshopify.com/cart
Simpleテーマでの現在のコード
/*====== Cart page styles ======*/
.cart-table {
width: 100%;
margin-bottom: $gutter;
th:first-child {
padding-left: 0;
}
@include media-query($medium-down) {
thead {
display: none;
}
tr {
display: block;
}
th,
td {
display: block;
text-align: right;
padding: $gutter / 2;
margin: 0;
td::before {
content: attr(data-label);
float: left;
text-align: center;
padding-right: 10px;
}
.responsive-table__row + .responsive-table__row,
tfoot > .responsive-table__row:first-child {
position: relative;
margin-top: 10px;
padding-top: $gutter / 2;
&::after {
content: '';
display: block;
position: absolute;
top: 0;
left: $gutter / 2;
right: $gutter / 2;
border-bottom: 1px solid $color-border;
}
}
}
.cart__table-cell--image {
padding-left: 25%;
padding-right: 25%;
@include media-query($medium-up) {
padding-left: 35%;
padding-right: 35%;
}
@include media-query($large-up) {
padding-left: 0;
padding-right: 0;
width: 15%;
}
}
}
.cart__image-wrapper {
margin: 0 auto;
}
.cart__image-container {
display: block;
position: relative;
}
.cart__image {
display: block;
width: 100%;
.supports-js & {
position: absolute;
top: 0;
}
&.lazyload {
opacity: 0;
}
}
.cart__note {
margin-bottom: 50px;
@include media-query($medium-up) {
margin-bottom: $gutter;
}
}
.cart__remove {
color: $color-body-text;
}
.cart__policies {
margin-bottom: 50px;
}
.update-cart {
margin-right: 4px;
}
@include media-query($large-up) {
.cart__table-cell--meta {
padding-left: $gutter / 2;
padding-right: $gutter / 2;
padding-top: 0;
padding-bottom: 0;
width: 30%;
}
.cart__table-cell--price,
.cart__table-cell--line-price,
.cart__table-cell--quantity {
width: auto;
padding: 0;
span {
white-space: nowrap;
}
}
.cart__table-cell--price {
width: 25%;
}
}
.cart--empty-message {
.cart--no-cookies & {
display: none;
}
}
.cart--continue-message {
.cart--no-cookies & {
display: none;
}
}
.cart--cookie-message {
display: none;
padding-bottom: 25px;
.cart--no-cookies & {
display: block;
}
}
.article .list--inline {
margin-bottom: $gutter / 2;
}
.comments {
padding-left: 0;
margin-left: 0;
}
.article__image-wrapper {
display: block;
position: relative;
}
.article__image {
display: block;
margin-bottom: $gutter / 2;
width: 100%;
.supports-js & {
position: absolute;
top: 0;
}
&.lazyload {
opacity: 0;
}
}
新しいアカウントを作って、元々のコードと見比べました。
/*====== Cart page styles ======*/
.cart-table {
width: 100%;
margin-bottom: $gutter;
th:first-child {
padding-left: 0;
}
@include media-query($medium-down) {
thead {
display: none;
}
tr {
display: block;
}
th,
td {
display: block;
text-align: right;
padding: $gutter / 2;
margin: 0;
}
td::before {
content: attr(data-label);
float: left;
text-align: center;
padding-right: 10px;
}
.responsive-table__row + .responsive-table__row,
tfoot > .responsive-table__row:first-child {
position: relative;
margin-top: 10px;
padding-top: $gutter / 2;
&::after {
content: '';
display: block;
position: absolute;
top: 0;
left: $gutter / 2;
right: $gutter / 2;
border-bottom: 1px solid $color-border;
}
}
}
.cart__table-cell--image {
padding-left: 25%;
padding-right: 25%;
@include media-query($medium-up) {
padding-left: 35%;
padding-right: 35%;
}
@include media-query($large-up) {
padding-left: 0;
padding-right: 0;
width: 15%;
}
}
}
.cart__image-wrapper {
margin: 0 auto;
}
.cart__image-container {
display: block;
position: relative;
}
.cart__image {
display: block;
width: 100%;
.supports-js & {
position: absolute;
top: 0;
}
&.lazyload {
opacity: 0;
}
}
.cart__note {
margin-bottom: 50px;
@include media-query($medium-up) {
margin-bottom: $gutter;
}
}
.cart__remove {
color: $color-body-text;
}
.cart__policies {
margin-bottom: 50px;
}
.update-cart {
margin-right: 4px;
}
@include media-query($large-up) {
.cart__table-cell--meta {
padding-left: $gutter / 2;
padding-right: $gutter / 2;
padding-top: 0;
padding-bottom: 0;
width: 30%;
}
.cart__table-cell--price,
.cart__table-cell--line-price,
.cart__table-cell--quantity {
width: auto;
padding: 0;
span {
white-space: nowrap;
}
}
.cart__table-cell--price {
width: 25%;
}
}
.cart--empty-message {
.cart--no-cookies & {
display: none;
}
}
.cart--continue-message {
.cart--no-cookies & {
display: none;
}
}
.cart--cookie-message {
display: none;
padding-bottom: 25px;
.cart--no-cookies & {
display: block;
}
}
.article .list--inline {
margin-bottom: $gutter / 2;
}
.comments {
padding-left: 0;
margin-left: 0;
}
.article__image-wrapper {
display: block;
position: relative;
}
.article__image {
display: block;
margin-bottom: $gutter / 2;
width: 100%;
.supports-js & {
position: absolute;
top: 0;
}
&.lazyload {
opacity: 0;
}
}
こちらはsimpleのオリジナルデザインで、このように作動してます
よく見ると
th,
td {
display: block;
text-align: right;
padding: $gutter / 2;
margin: 0;
}
こちらの最後の } が抜けていることに気付き、私のホームページの方に挿入したところ、カートページの元々のレイアウトは戻ったようですが、ホームページ全体のレイアウトが崩れました。
しかし、 } を抜くと、ホームページは崩れませんが、カートページのレイアウトが崩れます。
TemplatesのCart.liquidも元に戻してみましたが、変わらないです。
コード編集初心者で、ネットで調べながら少しずつ変更していましたが、どこが間違っているのかわかりません、、
可能性のある場所だけでも分かれば大変助かります。
もし原因が分かる方がいらっしゃればよろしくお願いいたします、、
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024