Alternate Image/text position in foreach loop dynamic data - javascript

So I am displaying two blocks of data in a tile format using bootstrap I can have two halves of a row. In this case on the right I have an image, on the left I have a div which displays text and buttons. I intend to have the even rows have the image on the left and odd on the right. So basically an image will always be on top and under text. Alternating in each row the divs will be mirrored.
Using javascript, blade, php or css how could i achieve this effect?
#foreach ($offers as $offer)
<div class="offersNew">
<div class="row row-equal-height">
<div class="col-md-6 paddedCol6">
<div class="inner">
<h2 class="centered marginTop0">{{ $offer->title or 'No title' }}</h2>
<h3 class="sub-header centered">{{ $offer->sub_header or '' }}</h3>
<p class="centered">
{{ mb_strimwidth(strip_tags($offer->homepage_description), 0, 200, '...') }}
</p>
<div class="callToAction">
<center>
<a href="/offer/{{ $offer->slug or $offer->id }}">
<button class="buttonOne"><p class="sub-header line0 margin1 white smallerText"> Let&apos;s Go! </p></button>
</a>
<a href="/offer/{{ $offer->slug or $offer->id }}">
<button class="buttonTwo"><p class="sub-header line0 margin1 blue smallerText">Other Offers</p></button>
</a>
</center>
</div>
#if ($offer->countdown == 1)
<div class="row countdown" data-timer="{{ $offer->end }}">
<h2 class="sub-header centered">
<span class="blueText">OFFER END</span>
<span class="days">0</span>:
<span class="hours">0</span>:
<span class="minutes">0</span>:
<span id="seconds"></span>
<span id="offerEndtime">0</span>
</h2>
</div>
#endif
</div>
</div>
<div class="col-md-6 main-background hidden-sm hidden-xs max400" style="background-image:url('{{ $offer->image or '' }}')">
</div>
</div>
</div>
#endforeach


Add a count variable and use modulus to alternate.
$count = 0;
foreach($offers as $offer){
if($count % 2 == 0){
// show variation 1
}else{
// show variation 2
}
$count++;
}

Related

I want to remove filter by color attribute and its value

My ecommerce have many Attributes for filter product . Every Attributes showing with foreach loop . Now I Want to remove filter by color and it's value. How I can Do it.
This Image red circle I want To skip it from loop
the site link is https://unikart.com.bd/category/skin
My code is Given below.
#foreach ($attributes as $attribute)
<div class="bg-white shadow-sm rounded mb-3">
<div class="fs-15 fw-600 p-3 border-bottom">
{{ translate('Filter by') }} {{ $attribute->getTranslation('name') }}
</div>
<div class="p-3">
<div class="aiz-checkbox-list others-attributes" id="attribute_list-{{$attribute->id}}" >
#foreach ($attribute->attribute_values as $attribute_value)
<label class="aiz-checkbox">
<input
type="checkbox"
name="selected_attribute_values[]"
value="{{ $attribute_value->value }}" #if (in_array($attribute_value->value, $selected_attribute_values)) checked #endif
onchange="filter()"
>
<span class="aiz-square-check"></span>
<span>{{ $attribute_value->value }}</span>
</label>
#endforeach
</div>
<div class="ViewMore" id="ViewMore-{{$attribute->id}}" onclick="ViewMore({{$attribute->id}})">View More</div>
<div class="ViewLess" id="ViewLess-{{$attribute->id}}" onclick="ViewLess({{$attribute->id}})">View Less</div>
</div>
</div>
#endforeach

You can add filter to attributes on backend
example:
$attributes = Attribute::where('type', '!=', 'color')->get();
If you add backend code screenshot, the answer would be clearer.

Undefined variable: products in #foreach

I'm facing some issues with a project build with Laravel
i want to show more then 12 product but i don't know what to change. this show only 12 product and i want 60 product to show. please help me. I've tried many solutions but its not working.
<div class="products-box-bar p-3 " >
<div class="row sm-no-gutters gutters-5">
#foreach ($products as $product)
<div class="col-xxl-3 col-xl-4 col-lg-3 col-md-4 col-6" >
<div class="product-box-2 bg-white alt-box my-md-2" style="border: 1px solid #f1f1f1;border-radius: 8px;">
<div class="position-relative overflow-hidden">
<a href="{{ route('product', $product->slug) }}" class="d-block product-image h-100 text-center" tabindex="0">
<img class="img-fit lazyload" src="{{ asset('frontend/images/placeholder.jpg') }}" data-src="{{ asset($product->thumbnail_img) }}" alt="{{ __($product->name) }}">
</a>
<div class="product-btns clearfix">
<button class="btn add-wishlist" title="Add to Wishlist" onclick="addToWishList({{ $product->id }})" type="button">
<i class="la la-heart-o"></i>
</button>
<button class="btn add-compare" title="Add to Compare" onclick="addToCompare({{ $product->id }})" type="button">
<i class="la la-refresh"></i>
</button>
<button class="btn quick-view" title="Quick view" onclick="showAddToCartModal({{ $product->id }})" type="button">
<i class="la la-eye"></i>
</button>
</div>
</div>
<div class="p-md-3 p-2">
<h2 class="redbaba">
<a href="{{ route('product', $product->slug) }}" class="product-title p-0 text-truncate-2" >
#if(home_base_price($product->id) != home_discounted_base_price($product->id))
<img class="sale654" src="{{ route('home') }}/ufo/img/sale.png"></img>
#endif
{{ __($product->name) }}
</a>
</h2>
<div class="price-box">
<span class="product-price strong-600" style="display: block;">{{ home_discounted_base_price($product->id) }}</span>
#if(home_base_price($product->id) != home_discounted_base_price($product->id))
<del class="old-product-price strong-400">BDT {{ home_base_price($product->id) }}</del>
#if (\App\Addon::where('unique_identifier', 'club_point')->first() != null && \App\Addon::where('unique_identifier', 'club_point')->first()->activated)
<span class="clubpoint02">⛬ Point {{ $product->earn_point }}</span>
#endif
#endif
</div>
<h2 class="djhfgj">
{{ __($product->shipping_type) }} shipping
</h2>
<div class="star-rating star-rating-sm mt-1" >
{{ renderStarRating($product->rating) }}
</div>
<p class="numberofsale">{{ __($product->num_of_sale) }} Sold</p>
</div>
</div>
</div>
#endforeach
</div>
</div>
<nav aria-label="Center aligned pagination" >
<ul class="pagination justify-content-center" style="background-color: #fff;padding: 10px 0;border-radius: 10px;margin-top: 15px;">
{{ $products->links() }}
</ul>
</nav>

In your App\Http\ProductsController.php or whichever file you use in fetching products from the database, you should see a function paginate(12), change it to paginate(60)

The title of your post is a little confusing as it doesn't match your description, I'll do my best to help though!
Undefined Variable: $products
This will most likely be due to the controller not passing a variable to the blade template.
In your controller, make sure that you are passing the variables to the view like so:
public function index() {
// Your logic here
return view('my-index', [
'products' => $products
]);
}
Pagination Limits
Displaying 12 items rather than 60 will be due to the limits passed to the paginate() function within the controller. Make sure you have set this to 60
public function index() {
// Retrieve up to 60 products at a time
$products = Product::paginate(60);
return view('my-index', [
'products' => $products
]);
}
Forelse loops
You may want to consider using a #forelse loop rather than a #foreach loop in case you don't have any products being returned from the query
#forelse($products as $product)
// Display your products
#empty
// Display a message saying no products were found
#endforelse

Creating a custom filter for ng-repeat

I'm trying to create a filter inside an ng-repeat. What i'm trying to achieve is a list -> more information on button click combination. I'm using the prestashop webservice for retrieving data. All the data is pulled from a json object.
So i did try some other solutions found on stack but sadly those didn't work for me. See the following example:
So my html exists of 2 blocks. One is a list of all orders, shortly summarized by id, date and the total payed amount. The other block would be the more information section. This section would show wich products were ordered, at what date, etc.
So i've created the list and made the div (each list item) a clickable element by adding ng-click. (yes i did also try a <button ng-click="function()"> but since it didn't made any difference between using the div or the button i've chosen for the div (layout).
So the onclick event grabs the order.id and adds it to a filter. This filter is then applied on the second "more information" block. This block should then filter this id and only grab that information. But thats where i've stranded since this part is still not working. So what i've tried so far is shown below:
My HTML
var myApp = angular.module('myApp',['ngRoute','cgNotify','pascalprecht.translate','ngCookies','ngSanitize']);
// Orders
myApp.controller('OrderController', function($scope, $http){
$http.get('config/get/getOrders.php').then(function(response){
$scope.orders = response.data.orders.order
});
$scope.currentOrder = {
"id": 3
};
console.log($scope.currentOrder);
$scope.showOrder = function(order) {
var order_id = order.id;
$scope.currentOrder = {
"id": parseInt(order_id)
};
console.log($scope.currentOrder);
return $scope.currentOrder;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- The list -->
<div class="col-lg-12" ng-controller="OrderController">
<div class="container">
<form class="defaultinput col-xl-5 col-lg-6 col-md-8 d-flex justify-content-start">
<svg class="align-self-center d-flex" height="20px" version="1.1" viewbox="7 5 20 20" width="20px" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path d="M27,23.5376923 L20.7969231,17.3046154 C21.7538462,16.0192308 22.3276923,14.4292308 22.3276923,12.7007692 C22.3276923,8.44769231 18.8969231,5 14.6638462,5 C10.4307692,5 7,8.44769231 7,12.7007692 C7,16.9538462 10.4307692,20.4015385 14.6638462,20.4015385 C16.4084615,20.4015385 18.0123077,19.8092308 19.3,18.8223077 L25.4476923,25 L27,23.5376923 L27,23.5376923 Z M8.35846154,12.7007692 C8.35846154,9.20692308 11.1869231,6.36461538 14.6638462,6.36461538 C18.1407692,6.36461538 20.9692308,9.20692308 20.9692308,12.7007692 C20.9692308,16.1946154 18.1407692,19.0369231 14.6638462,19.0369231 C11.1869231,19.0369231 8.35846154,16.1946154 8.35846154,12.7007692 L8.35846154,12.7007692 Z" fill="#8E8E93" fill-rule="evenodd" id="Search-Icon" stroke="none"></path></svg>
<input class="form-control" placeholder="{{ 'Zoeken' | translate }}" type="text">
</form>
<div class="row listrow" ng-repeat="order in orders">
<div ng-click="showOrder(order)" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3">
<p type="number" ng-bind="order.id" ng-value="order.id"></p>
</div>
<div class="col-lg-4">
<p ng-bind="order.invoice_date"></p>
</div>
<div class="col-lg-5">
<p ng-bind="order.total_paid_real"></p>
</div>
</div>
</div>
</div>
</div>
<!-- The more information block -->
<div class="col-lg-11" ng-controller="OrderController">
<div>
<div ng-repeat="order in orders | filter: currentOrder" class="text-center margin-t-10">
<div class="row listrow"></div>
<h1>{{ 'Totaal' | translate }}</h1><h1 ng-bind="order.id"></h1>
<h3>#010 - {{ 'Contant' | translate }} {{ 'Betaald' | translate }}</h3>
</div>
<div class="row listrow margin-t-20 no-border">
<div class="col-6">
Blauw shirt - Maat: L
</div>
<div class="col-1">
2x
</div>
<div class="col-5 text-right">
€ 200,00
</div>
</div>
<div class="row listrow no-border">
<div class="col-6">
Blauw shirt - Maat: L
</div>
<div class="col-1">
2x
</div>
<div class="col-5 text-right">
€ 200,00
</div>
</div>
<div class="row margin-t-30 justify-content-end">
<div class="col-6">
<div class="row">
<div class="col-6">
{{ 'Subtotaal' | translate }}
</div>
<div class="col-6 text-right">
€ 400,00
</div>
</div>
<div class="row listrow">
<div class="col-6">
21% {{ 'BTW' | translate }}
</div>
<div class="col-6 text-right">
€ 84,00
</div>
</div>
<div class="row">
<div class="col-5 padding-r-5">
{{ 'Totaal' | translate }}
</div>
<div class="col-3 align-self-center no-padding">
<h6>(2 items)</h6>
</div>
<div class="col-4 padding-l-0 text-right">
€ 484,00
</div>
</div>
</div>
</div>
</div>
<div class="row margin-t-100 d-flex justify-content-around">
<button ng-click="" type="button" class="smallbutton defaultbutton">{{ 'Print bon' | translate }}</button>
<a href="#/refund">
<button type="button" class="smallbutton defaultbutton">{{ 'Retour' | translate }}</button>
</a>
</div>
</div>
The JSON example
{"orders":{"order":[{"id":"1","id_address_delivery":"4","id_address_invoice":"4","id_cart":"1","id_currency":"1","id_lang":"1","id_customer":"1","id_carrier":"2","current_state":"5","module":"ps_checkpayment","invoice_number":"4","invoice_date":"2017-03-16 15:18:27","delivery_number":"4","delivery_date":"2017-03-16 15:18:27","valid":"1","date_add":"2017-03-16 14:36:24","date_upd":"2017-03-16 15:18:27","shipping_number":{"#attributes":{"notFilterable":"true"}},"id_shop_group":"1","id_shop":"1","secure_key":"b44a6d9efd7a0076a0fbce6b15eaf3b1","payment":"Payment by check","recyclable":"0","gift":"0","gift_message":{},"mobile_theme":"0","total_discounts":"0.000000","total_discounts_tax_incl":"0.000000","total_discounts_tax_excl":"0.000000","total_paid":"55.000000","total_paid_tax_incl":"55.000000","total_paid_tax_excl":"55.000000","total_paid_real":"55.000000","total_products":"53.000000","total_products_wt":"53.000000","total_shipping":"2.000000","total_shipping_tax_incl":"2.000000","total_shipping_tax_excl":"2.000000","carrier_tax_rate":"0.000","total_wrapping":"0.000000","total_wrapping_tax_incl":"0.000000","total_wrapping_tax_excl":"0.000000","round_mode":"0","round_type":"0","conversion_rate":"1.000000","reference":"XKBKNABJK","associations":{"order_rows":{"#attributes":{"nodeType":"order_row","virtualEntity":"true"},"order_row":[{"id":"1","product_id":"2","product_attribute_id":"10","product_quantity":"1","product_name":"Blouse - Color : White, Size : M","product_reference":"demo_2","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"26.999852","unit_price_tax_incl":"27.000000","unit_price_tax_excl":"27.000000"},{"id":"2","product_id":"3","product_attribute_id":"13","product_quantity":"1","product_name":"Printed Dress - Color : Orange, Size : S","product_reference":"demo_3","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"25.999852","unit_price_tax_incl":"26.000000","unit_price_tax_excl":"26.000000"}]}}},{"id":"2","id_address_delivery":"4","id_address_invoice":"4","id_cart":"2","id_currency":"1","id_lang":"1","id_customer":"1","id_carrier":"2","current_state":"5","module":"ps_checkpayment","invoice_number":"3","invoice_date":"2017-03-16 15:18:27","delivery_number":"3","delivery_date":"2017-03-16 15:18:27","valid":"1","date_add":"2017-03-16 14:36:24","date_upd":"2017-03-16 15:18:27","shipping_number":{"#attributes":{"notFilterable":"true"}},"id_shop_group":"1","id_shop":"1","secure_key":"b44a6d9efd7a0076a0fbce6b15eaf3b1","payment":"Payment by check","recyclable":"0","gift":"0","gift_message":{},"mobile_theme":"0","total_discounts":"0.000000","total_discounts_tax_incl":"0.000000","total_discounts_tax_excl":"0.000000","total_paid":"75.900000","total_paid_tax_incl":"75.900000","total_paid_tax_excl":"75.900000","total_paid_real":"75.900000","total_products":"73.900000","total_products_wt":"73.900000","total_shipping":"2.000000","total_shipping_tax_incl":"2.000000","total_shipping_tax_excl":"2.000000","carrier_tax_rate":"0.000","total_wrapping":"0.000000","total_wrapping_tax_incl":"0.000000","total_wrapping_tax_excl":"0.000000","round_mode":"0","round_type":"0","conversion_rate":"1.000000","reference":"OHSATSERP","associations":{"order_rows":{"#attributes":{"nodeType":"order_row","virtualEntity":"true"},"order_row":[{"id":"3","product_id":"2","product_attribute_id":"10","product_quantity":"1","product_name":"Blouse - Color : White, Size : M","product_reference":"demo_2","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"26.999852","unit_price_tax_incl":"27.000000","unit_price_tax_excl":"27.000000"}
To make it easier i've also created a JSfiddle
So my question is, since the first set of the filter is working (3). Why isn't my on click function working? with the console.log() i checked if the id is selected and it is. So why isn't the filter updated?
If you have any questions please ask them as comments.
As always, Thanks in advance!

Angular JS if-else not working as expected

<body ng-app ng-controller="progressCircleController">
<h1 class="errorHeader">List of Classes</h1>
<!-- Modal -->
<div id="progressModal" class="container" role="dialog">
<form>
<ul class="col-md-12 col-lg-12">
<li ng-click="showErrorDetails(key)" class="col-sm-12 col-md-4 col-lg-4 eachClassCell"
ng-repeat='(key,value) in sampleJSON'>
<div ng-if="{{value.length}} <= 50">
<div title="{{key}}" class="progress green">{{key}}
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">{{key}}</div>
</div>
</div>
<div ng-if="{{value.length}} >= 50">
<div title="{{key}}" class="progress red">{{key}}
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">{{key}}</div>
</div>
</div>
</li>
</ul>
</form>
</div>
</body>
The progress circle created for each key is duplicate. I need to draw the progress circle based on the value.length of every key such that when value.length > 50 then draw the red circle and the value.length <=50 the draw the green circle.

It was angular js version issue.
I was using old angular js version (1.0.7) which I think does not recognize the > or < or any logical operator and it does not even throw any error in console.
Used angular JS version 1.2.29 and worked perfectly.
And changed the div to <div ng-if="value.length <= 50"> because it is already inside angular context.

How to align cards in different rows

I'm trying to do something like this: https://nomadlist.com/
Rows of 3 elements (cards?) Going from top to bottom. Same size, perfectly aligned.
I'm using Handlebars and Bulma CSS, and the card components and doing this:
<div class="columns">
{{#each serverElements}}
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">
{{this.title}}
</p>
<a class="card-header-icon">
<span class="icon">
<i class="fa fa-angle-down"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
{{this.body}}
<a>#bulmaio</a>. <a>#css</a> <a>#responsive</a>
<br>
<small>this.createdAt</small>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Edit</a>
<a class="card-footer-item">Delete</a>
</footer>
</div>
</div>
{{/each}}
</div>
And it partially works. Each of the elements gets its own card. But this prints them all on the same row. And with different sizes.

If i understand you right, You sould use the is-multiline modifier with the right column, if you want 3 in a row, then use `column is-4'.

Categories