I am working on an acceptence test to see if I can go from homepage to categories however no matter what I try I does see the link but I can't click it.
<?php
$I = new AcceptanceTester($scenario);
$I->wantTo('I click category');
$I->amOnPage('/');
$I->seeLink('Categories', '/categories');
$I->click('category');
?>
The HTML:
<div class="col s12 m4">
<a href="/categories" >
<div class="card">
<div class="card-content">
<div class="teal-text center-align" name="category">
Categories
</div>
</div>
</div>
</a>
</div>
</div>
I don't know if Codeception is looking for the 'name' attribute of html tag. Rather than this, you should try other ways of use of click method: http://codeception.com/docs/03-AcceptanceTests#Click
Also you can try this:
$I->click(['name' => 'category']);
Related
Question
Hi, I am trying to print the first two categories images with col-xl-6, and the remaining categories images with col-xl-4. The size of the first two images is different from the last three. Please let me know how it will work. If you can share code it'll be awesome! Thanks.
Blade-File
#foreach ($categories as $cat)
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 column">
<a href='/products/{{$cat->id}}'>
{{-- style="height: 460px; width:345px; --}}
<div class="img">
<img class="cat-img mx-2" id="cat-img" src="/uploads/categories/{{$cat->image_url}}" />
</div>
</a>
<div class="title text-center">
<h2>{{$cat->title}}</h2>
<a href='products/{{$cat->id}}'>Shop Now</a>
</div>
</div>
#endforeach
There is a $loop variable available that you can check if the index of current item with.
https://laravel.com/docs/8.x/blade#the-loop-variable
#if ($loop->index === 0 || $loop->index === 1)
// do stuff
#endif
how can i integrate load more button that loads next 10 posts from custom query ?
I've tried with bunch of plugins, css and js ways, but can't seem to load it.
How would you load more posts on load click?
Any tip is very much appreaciated
<div class="container">
<div class="row featured-akcije">
#foreach(get_field('actions') as $action)
#php($query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)))
#php($query->the_post())
<div class="col-md-4 col-xl-3 action">
<div class="box-shadow-posts hoverPic">
<div class="row">
<div class="col-12 col-md-12">
<div class="row">
<div class="col-4 col-md-6 col-xl-6">
<div class="action-img">
<img src="{{ get_the_post_thumbnail_url() }}" class="img-fluid">
<p class="action">action</p>
</div>
</div>
<div class="col-8 col-md-6 pl-md-0">
<div class="row info-action">
<div class="col-md-12"><h2 class="title">
{{ the_title() }}
</h2></div>
<div class="col-md-12 price-info">
<div class="divider">
</div>
<?php if( get_field('price_off') ): ?>
<p class="price">price from <?php the_field('price_from'); ?>e</p>
<?php endif; ?>
<p class="detail"><a href="{{ the_permalink() }}"><span class="nav-border"></span><span>detail <i
class="fas fa-arrow-right"></i></span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#php(wp_reset_postdata())
#endforeach
</div>
</div>
I implemented load more functionality for custom query like this:
Create wp ajax endpoint which is called be javascript on load more button click
Endpoint gets offset which post to load? For example from 11 to 20 and returns html with rendered posts
Javascript appends return html to html of the page in proper place
How to create endpoint? Here are examples for creating endpoint and calling it from javascript: https://codex.wordpress.org/AJAX_in_Plugins In endpoint you should call fetching posts like this: $query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)) with proper offset passed in params, render html template and return it.
I tried to bind data into a pivotItem using Winjs.ui.repeater dynamically but the debugger throws an error and show the base.js, can anyone pls help me out.
<section class="page-section" aria-label="Main content" role="main">
<div>
<div data-win-control="WinJS.UI.Pivot">
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{'header':'AJJ-MAS'}">
<div data-win-control="WinJS.UI.Repeater" data-win-options="{data: AjjMsb.data}">
<section>
<label data-win-bind="{innerText:trainnumber}"></label>
<p data-win-bind="{innerText:starttime}"></p>
<p data-win-bind="{innerText:endtime}"></p>
</section>
</div>
</div>
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{'header':'AJJ-MSB'}">
</div>
</div>
</div>
</section>
Curly brackets are not required for the data-win-bind property. Let me know if that fixes your problem!
I've already done the isotope filtering to filter posts by categories. But I also need to filter posts by tags on the same page. I’m still new to wordpress so I really hope someone can give me any advice on how to do this. Thanks a lot!
you need to echoe the tags in the class, so that isotope can identify the filters.
See below from the isotope site:
<div id="container">
<div class="item transition metal">...</div>
<div class="item post-transition metal">...</div>
<div class="item alkali metal">...</div>
<div class="item transition metal">...</div>
<div class="item lanthanoid metal inner-transition">...</div>
<div class="item halogen nonmetal">...</div>
<div class="item alkaline-earth metal">...</div>
...
</div>
Source
Then you need to echoe the tag list and adjust your code to filter on click.
<div id="filters" class="button-group">
<button data-filter="*">show all</button>
<button data-filter=".metal">metal</button>
<button data-filter=".transition">transition</button>
<button data-filter=".alkali, .alkaline-earth">alkali & alkaline-earth</button>
<button data-filter=":not(.transition)">not transition</button>
<button data-filter=".metal:not(.transition)">metal but not transition</button>
</div>
Have a look here.
In theory it should work the same as categories.
See
I'm using bootstrap 2 to build a wordpress theme with a collapsable menu, and everything works fine, however the open item doesn't close when I click a new item in the menu. any idea?
The php can be disregarded :) Thanks.
PS: When I tested with pure html it worked just fine
<div class="accordion-group">
<div class="accordion-heading"><?=$catItem->name;?></div>
<div id="<?=$catItem->slug;?>" class="accordion-body collapse">
<div class="accordion-inner">
<div id="<?=$generalActiveMenu;?>1" class="accordion">
<? $subCategory = new $Category();
$subCategory->getCategoryList($catItem->term_id); /* get sub category of each product */
foreach($subCategory->catList as $key => $subCatItem) {
?><div class="accordion-group">
<div class="accordion-heading">
<?=$subCatItem->name;?>
</div>
<div id="<?=$subCatItem->slug;?>" class="accordion-body collapse">
<? if(get_posts('category_name='.$subCatItem->slug)) {
?><div class="accordion-inner">
<ul class="nav nav-list">
<? $Post->postCat = $subCatItem->term_id;
$Post->getPostList();
foreach ($Post->postList as $key => $postItem) {
?><li id="<?=$postItem->post_name;?>"><?=$postItem->post_title;?></li><?
} ?>
</ul>
</div><?
} ?>
</div>
</div><?
}
?>
</div>
</div>
</div>
</div>
I may be wrong but you could try:
$('#myAccordianTab').collapse({
toggle: true
})
Take a look at this link for more info:
http://getbootstrap.com/2.3.2/javascript.html#collapse
This should help you build up correctly and and explains the toggle(or collapsing) function